<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="debounceHandleClick">500ms内只触发一次</button>
  </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue';
import debounce from 'lodash/debounce';
const msg = ref('hello vue');
const handleClick = () => {
  console.log('500ms内只触发一次');
};

const timer = setTimeout(() => {
  console.log('timer');
}, 1000);

const debounceHandleClick = debounce(handleClick, 500);
onUnmounted(() => {
  clearTimeout(timer);
  // 清除副作用
  debounceHandleClick.cancl();
});
</script>

<style lang="scss" scoped></style>
